<template>
    <div class="topo-toolbox">
        <el-menu :collapse="isCollapse" class="topo-toolbox" default-active="1" unique-opened @close="handleClose" @open="handleOpen">
            <el-submenu index="100-基本图形">
                <template slot="title">
                    <q-icon name="format_shapes" size="20px" style="margin-right: 8px" />
                    <span>交互组件</span>
                </template>
                <el-menu-item-group class="topo-toolbox">
                    <DataPanel ref="dataPanel" :data="jsonBase" />
                </el-menu-item-group>
            </el-submenu>
            <el-submenu v-if="false" index="101-统计图形">
                <template slot="title">
                    <q-icon name="equalizer" size="20px" style="margin-right: 8px" />
                    <span>统计图形</span>
                </template>
                <el-menu-item-group class="topo-toolbox">
                    <DataPanel ref="dataPanel" :data="jsonChart" />
                </el-menu-item-group>
            </el-submenu>
            <el-submenu v-for="(item, index) in toolboxData" :key="index" :index="item.id">
                <template slot="title">
                    <q-icon name="burst_mode" size="20px" style="margin-right: 8px" />
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item-group v-loading="loading" class="topo-toolbox" element-loading-text="正在初始化...">
                    <DataPanel ref="dataPanel" :data="item.data" />
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import jsonBase from './data-toolbox/base.json';
import jsonShape from './data-toolbox/shape.json';
import jsonChart from './data-toolbox/chart.json';
import jsonTest from './data-toolbox/test.json';
import jsonIcon from './data-toolbox/icon.json';
import DataPanel from './data-panel/index';
import noImage from '../topo/images/tab/echart.svg';
import request from '@/utils/request';

export default {
    name: 'TopoToolbox',
    components: {
        DataPanel,
    },
    data() {
        return {
            toolbox: [],
            items: [],
            selectedIndex: -1,
            toolboxData: [],
            loading: false,
            jsonBase: jsonBase,
            jsonChart: jsonChart,
            jsonShape: jsonShape,
            jsonTest: jsonTest,
            jsonIcon: jsonIcon,
            isCollapse: false,
            isTest: false,
            noImage: noImage,
        };
    },
    mounted() {
        // var ip = window.location.host;
        // if(ip.split(":")[0]=='localhost'||ip.split(":")[0]=='192.168.0.118'){
        //   this.isTest=true;
        // }else if(this.$route.query.isTest){
        //   this.isTest=true;
        // }else{
        //    this.isTest=false;
        // }
        this.getImageType();
    },
    methods: {
        //获取图表类别
        getImageType() {
            let query = {};
            let url = '/system/dict/data/type/sys_echart_type';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this.toolboxData = [];
                res.data.forEach((element, index) => {
                    let tyData = {
                        id: 1000 + (index + 1) + '-' + element.dictValue,
                        title: element.dictLabel,
                        data: {},
                    };
                    this.toolboxData.push(tyData);
                });
            });
        },
        onDragstart(event, info) {
            var infoJson = JSON.stringify(info.info);
            event.dataTransfer.setData('my-info', infoJson);
        },
        getJson() {
            let newJson = {
                title: '',
                icon: 'payment',
                opened: false,
                items: [],
            };
            return newJson;
        },
        getJsonItem(option) {
            let newJson = {
                text: '自定义',
                icon: 'format_list_bulleted',
                info: {
                    type: 'chart-wrapper',
                    componentShow: ['自定义echarts'],
                    action: [],
                    dataBind: {
                        echartOption: option,
                        echartRun: 0,
                        paramData: [
                            {
                                key: '',
                                value: '',
                            },
                        ],
                        bodyDataTable: [
                            {
                                key: '',
                                value: '',
                            },
                        ],
                        headerData: [
                            {
                                key: '',
                                value: '',
                            },
                        ],
                    },
                    style: {
                        position: {
                            x: 0,
                            y: 0,
                            w: 300,
                            h: 300,
                        },
                        backColor: 'rgba(0, 0, 0, 0)',
                        foreColor: '#000',
                        zIndex: 1,
                        transform: 0,
                        transformType: 'rotate(0deg)',
                    },
                },
            };
            return newJson;
        },
        getImages(label, index) {
            let baseApi = this.topoUtil.getServerIp() + ':' + this.topoUtil.getServerPort() + '/prod-api/';
            let query = {
                pageNum: 1,
                pageSize: 999,
                echartType: label,
                orderByColumn: 'id',
                isAsc: 'desc',
            };
            let url = '/zutai/bEchartType/list';
            request({
                url: url,
                method: 'get',
                params: query,
            })
                .then((res) => {
                    if (res.code == 200) {
                        if (res.rows.length > 0) {
                            let newJson = this.getJson();
                            res.rows.forEach((element) => {
                                newJson.title = element.echartName;
                                //为提高刷新图表的速度，关联字段存储图表的id
                                let newJsonItem = this.getJsonItem('echartId-' + element.id);
                                newJsonItem.text = element.echartName;
                                if (element.echartImgae) {
                                    newJsonItem.icon = baseApi + element.echartImgae;
                                } else {
                                    newJsonItem.icon = this.noImage;
                                }
                                newJson.items.push(newJsonItem);
                            });
                            this.toolboxData[index].data = newJson;
                            // console.log(this.toolboxData);
                        }
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    console.log(error);
                    this.loading = false;
                });
        },
        handleClose(key, keyPath) {
            //this.toolboxData={};
        },
        handleOpen(key, keyPath) {
            this.loading = true;
            let strArr = key.split('-');
            if (strArr[0] > 1000) {
                this.getImages(strArr[1], strArr[0] - 1001);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-toolbox {
    // border: #ccc solid 1px;
    background-color: #f1f3f4;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.item-icon {
    height: 10px;

    .iconfont {
        font-size: 10px;
        margin-left: 14px;
    }
}
</style>
<style>
.topo-toolbox::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.topo-toolbox::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.topo-toolbox::-webkit-scrollbar-track {
    background-color: #ddd;
}
</style>
